<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是管理员端</title>

    <script src="../axios.js"></script>
    <script src="../vue.js"></script>
    <style>
        /* 样式可以根据需要自行修改 */
        .container {
            display: flex;
            height: 100vh;
        }

        .user-list {
            width: 200px;
            background-color: #f0f0f0;
            padding: 10px;
        }

        .user-list-item {
            cursor: pointer;
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 5px;
            background-color: #ddd;
        }

        .user-list-item.active {
            background-color: #aaf;
        }

        .chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;

            padding: 20px;
        }

        .chat-area p {
            margin-bottom: 10px;
        }

        .messages {
            overflow-y: auto; /* 当聊天内容超出时显示滚动条 */
            flex: 1; /* 让聊天内容区域可以占据剩余的空间 */
        }

        .message-input {
            margin-top: 10px; /* 与聊天内容区域有一定的间距 */
            display: flex;
            align-items: center;
            height: 10%;
        }

        .message-input input {
            flex: 1;
            padding: 8px;
            font-size: 16px;
        }

        .message-input button {
            padding: 8px 16px;
            margin-left: 10px;
            font-size: 16px;
            cursor: pointer;
        }

        .message-left {
            text-align: left;
            margin-bottom: 10px;
            /* 根据需要自定义样式 */
        }

        .message-right .content {
            background-color: seagreen
        }

        .message-right {
            text-align: right;
            margin-bottom: 10px;
            /* 根据需要自定义样式 */
        }

        .time {
            font-weight: bold; /* 时间戳加粗 */
            color: #666; /* 时间戳颜色 */
            font-size: 12px; /* 时间戳字体大小 */
            margin-bottom: 4px; /* 时间戳与内容之间的间距 */
        }

        .content {
            background-color: #f0f0f0; /* 内容背景色 */
            padding: 8px; /* 内容内边距 */
            border-radius: 6px; /* 内容边框圆角 */
            display: inline-block; /* 内容显示为块级元素 */
            max-width: 80%; /* 内容最大宽度，防止过宽 */
            word-wrap: break-word; /* 长单词换行 */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 内容阴影 */
        }

        .notification {
            color: whitesmoke; /* 设置文字颜色为红色 */
            font-size: 10px; /* 设置文字大小为10像素 */
            max-width: 400px; /* 设置最大宽度 */
            border: 2px solid grey; /* 设置2像素宽度的灰色实线边框 */
            background-color: grey; /* 设置背景颜色为灰色 */
            border-radius: 50%; /* 设置边框为圆形 */
        }


    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <!-- 左侧用户列表 -->
        <div class="user-list">
            <div
                    v-for="(user, index) in users"
                    :key="index"
                    @click="selectUser(index)"
                    :class="{ 'user-list-item': true, 'active': activeUser === index }"
            >
                用户 {{ user}}
                <!--                这一段是新对话提示-->
                <span class="notification" v-if="messageCounts[index] > 0">{{ messageCounts[index] }}</span>
            </div>
        </div>
        <!-- 右侧聊天内容区域 -->
        <div class="chat-area">

            <div class="messages">
                <div v-for="(message, msgIndex) in messages[activeUser]" :key="msgIndex"
                     :class="{ 'message-left': isAdminMessage(message), 'message-right': !isAdminMessage(message)}">
                    <span class="time">{{ message.time }}</span> <br>
                    <span class="content">{{ formatMessageContent(message.content) }}</span>
                </div>
            </div>

            <div class="message-input">
                <input type="text" v-model="newMessage" placeholder="输入消息...">
                <button @click="sendMessage()">发送</button>
            </div>
        </div>


    </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {

            // 用户列表参数
            activeUser: 0, // 当前选中的用户索引
            users: [], // 用户列表，这里存用户ID
            newMessage: '', // 用户输入的新消息
            messages: [],// 存储每个用户的消息，初始化为空数组
            messageCounts: [], // 每个用户的未读消息数量

            // websocket初始化连接参数
            protocol: '',
            host: '',
            endpoint: 0,
            contextPath: '',
        },
        methods: {
            /**
             * 普通方法，控制显示效果的
             * @param index
             */
            // 控制管理员信息的显示
            formatMessageContent(content) {
                // 格式化消息内容的方法
                if (content.startsWith('admin:')) {
                    return content.substr('admin:'.length); // 去掉开头的 "admin:" 部分，直接返回冒号后面的内容
                } else {
                    return content;
                }
            },
            // 点击用户列表项，设置当前选中用户
            selectUser(index) {
                this.activeUser = index;        // 点击用户时，设置当前选中的用户索引
                this.messageCounts[index] = 0; // 将未读消息数量归零
            },
            //判断消息是否为管理员发的
            isAdminMessage(message) {
                return !message.content.startsWith('admin:');
            },

            /**
             * 事件请求
             */
            // 发送消息
            sendMessage() {
                if (this.newMessage.trim() !== '') {//
                    var uid = this.users[this.activeUser];
                    var params = new URLSearchParams();
                    params.append("uid", uid);
                    params.append("content", this.newMessage);
                    axios.post('../../../adminchat.action?op=setMassage', params).then(result => {
                        if (result.data.code == 1) {
                            // console.log(result.data.obj);
                            // console.log(this.activeUser);
                            // 使用 Vue.set 或者 this.$set 来更新数组元素，确保 Vue 可以追踪变化
                            this.$set(this.messages, this.activeUser, result.data.obj);
                            this.messageCounts=0; // 将未读消息数量归零
                        } else {
                            alert("发送失败");
                        }
                    });

                    this.newMessage = ''; //发送完毕关闭输入框 清空输入框
                }


            },

            /**
             * 初始化请求
             */
            // 获取协议参数请求
            getServletInfo() {
                axios.post('../../../adminchat.action?op=getServerInfo').then(result => {
                    if (result.data.code == 1) {
                        // 返回参数后，初始化参数
                        this.protocol = result.data.obj.protocol;
                        this.host = result.data.obj.host;
                        this.endpoint = result.data.obj.port;
                        this.contextPath = result.data.obj.contextPath;
                        this.initWebSocket();
                    }
                });
            },
            //初始化参数
            initWebSocket() {
                // 获取当前页面的协议、主机和端口
                //const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
                const protocol = this.protocol;

                //const host = window.location.host;
                const host = this.host;
                //考虑nginx反向代理没有端口的问题
                //const host = window.location.host.includes(':') ? window.location.host : window.location.host + ':8080';

                //const endpoint = '/shop_war/echo';
                const endpoint = this.endpoint + this.contextPath + '/user';
                //const endpoint = '/shop/echo';

                // 动态生成 WebSocket 的 URL
                const wsUrl = `${protocol}://${host}:${endpoint}`;

                // 创建 WebSocket 连接
                var ws = new WebSocket(wsUrl);

                ws.onopen = function () {
                    console.log('WebSocket 连接已经建立。');
                    // ws.send('Hello, server!');
                };

                ws.onmessage = (event) => {
                    // alert("用户消息："+event.data);
                    console.log('用户消息：', event.data);
                    //该刷新了
                    if (event.data) {
                        app.get(event.data).then(result => {
                            if (result.data.code == 1) {
                                var found = false;
                                for (var i = 0; i < app.$data.users.length; i++) {
                                    if (app.$data.users[i] === Number(event.data)) {
                                        this.$set(this.messages, i, result.data.obj);//如果已经有这个，直接渲染

                                        this.messageCounts[i]++; // 对应用户的未读消息数量加1

                                        console.log("现在的新消息数" + this.messageCounts);

                                        found = true;
                                        break;
                                    }
                                }
                                if (!found) {//没有就加
                                    this.users.unshift(Number(event.data));//用户列表+1
                                    this.messages.unshift(result.data.obj);//用户消息列表+1
                                    this.messageCounts.unshift(1);//用户新消息+！
                                    console.log(this.users);
                                    console.log(this.messages);

                                    console.log("现在的新消息数" + this.messageCounts);

                                }
                            }
                        })
                    }
                };

                ws.onerror = function (event) {
                    console.error('WebSocket 连接出现错误：', event);
                };

                ws.onclose = function () {
                    console.log('WebSocket 连接已经关闭。');
                };

                window.onbeforeunload = function () {
                    app.$data.ws.close();
                };

                this.ws = ws;
            },
            //获取  服务端的消息  后调用
            get(uid) {
                let params = new URLSearchParams();
                params.append("uid", uid);
                return axios.post("../../../adminchat.action?op=responseNotice", params)
                    .then(response => {
                        // 假设服务器返回的数据结构如下：
                        // { data: { code: 0, obj: {...} } }
                        return response;
                    })
                    .catch(error => {
                        console.error('获取数据时发生错误：', error);
                        throw error;
                    });
            },
            //初始化聊天内容并渲染
            initChatContent() {
                axios.post('../../../adminchat.action?op=initChatContent').then(result => {
                    if (result.data.code == 1) {
                        // 返回参数后，初始化参数
                        console.log(result.data.obj);

                        this.users = result.data.obj[0];
                        this.messages = result.data.obj[1];

                        // 初始化参数列表
                        this.messageCounts = new Array(this.users.length).fill(0);

                    }
                });
            }

        },
        // 这里放初始化请求
        mounted() {
            //获取初始化servelt参数并调用方法初始化连接
            this.getServletInfo();
            this.initChatContent();
        }
    })
</script>
</body>
</html>